$(function(){
  //get elem
  let $url = $('input[type="text"]'),
      $btnSave = $('input[type="button"]'),
      $img = $('img'),
      $tmpImg = $('<img>');

  //load localstorage image
  //loadImage();
  
  $btnSave.click(() => {
    //load tmp image
    $tmpImg.attr('crossOrigin','anonymous');

    //validate url: not empty, pattern
    $tmpImg.attr('src',$url.val());
  });
  

  $tmpImg.load(function() {
    let can = $('<canvas>').get(0);
    let ctx = can.getContext('2d');

    ctx.width = this.width;
    ctx.height = this.height;
    
    //fill tmp image canvas
    ctx.drawImage(this,0,0,can.width,can.height);

    //canvas output base64
    //save base64 localstorage
    window.localStorage.setItem('img',can.toDataURL());
    loadImage();
  });

  function loadImage() {
    let strImg = window.localStorage.getItem('img');
    if(strImg) {
      $img.attr('src',strImg);
      $img.css({display: 'block'});
    } else { strImg = ''
      $img.css({display: 'none'});
    }
  }
  
});



